<template>
  <div class="adjust-background">
    <section>
      <v-parallax src="@/assets/files/gin02.jpg" :height="clientHeight">
        <v-layout
          column
          align-center="true"
          class="d-flex white--text"
        >
          <v-flex class="d-flex">
            <div class="align-self-center">
              <v-avatar
                :tile="tile"
                :size="avatarSize"
              >
                <img
                  v-if="img"
                  :src="avatar"
                  alt="avatar"
                >
                <span v-else>VJ</span>
              </v-avatar>
              <h1 class="white--text mb-2 display-1 text-center">{{ username }}</h1>
              <div class="subheading text-center">{{ signature }}</div>
              <v-row>
                <v-col align-self="center">
                  <v-btn
                    color="blue lighten-2"
                    :disabled="isLogin"
                    dark
                    large
                    @click="joinMe()"
                  >
                    加入我
                  </v-btn>
                </v-col>
                <v-col>
                  <v-btn
                    color="red lighten-2"
                    :disabled="!isLogin"
                    dark
                    large
                    @click="logOut()"
                  >
                    注销
                  </v-btn>
                </v-col>
              </v-row>
            </div>
          </v-flex>
        </v-layout>
      </v-parallax>
    </section>

    <section>
      <v-layout
        column
        wrap
        align-left
      >
        <v-flex xs12 sm4 class="my-4">
          <div class="text-center">
            <h2 class="headline">罗曼·罗兰：</h2>
            <span class="subheading">
              世上只有一种英雄主义，就是认清生活的本质后，依旧选择热爱生活。
            </span>
          </div>
        </v-flex>
        <v-flex xs12>
          <v-layout row wrap align-left>
            <v-flex xs12 md3>
              <v-hover
                v-slot:default="{ hover }"
                :open-delay="openDelay"
                :close-delay="closeDelay"
                :disabled="disabled"
                :value="value"
              >
                <v-card flat class="transparent" :elevation="hover ? 12 : 0" height="300">
                  <v-card-text class="text-center">
                    <v-icon x-large class="blue--text text--lighten-2">mdi-palette
                    </v-icon>
                  </v-card-text>
                  <v-card-title primary-title class="layout justify-center">
                    <div class="headline text-center">Web</div>
                  </v-card-title>
                  <v-card-text class="text-center">
                    <v-chip x-small small color="#0C74AA" draggable>Html5</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Vue</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>NodeJs</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Webpack</v-chip>
                    <v-chip x-small color="#DAD7E5" draggable>BootStrap</v-chip>
                    <v-chip x-small color="#AFD0D9" draggable>JQuery</v-chip>
                    <v-chip x-small color="#B09D81" draggable>axios</v-chip>
                    <v-chip x-small color="#D8C1A3" draggable>layui</v-chip>
                    <v-chip x-small color="#EDF0E9" draggable>H+</v-chip>
                    <v-chip x-small color="#65656A" draggable>Echarts3</v-chip>
                    <v-chip x-small color="#27A4E6" draggable>muse-ui</v-chip>
                    <v-chip x-small color="#DADDFD" draggable>Element</v-chip>
                    <v-chip x-small color="#61AFA5" draggable>Vuetify</v-chip>
                    <br>
                    <span class="text--primary">
                      <span>Fighting for more beautiful projects</span><br>
                    </span>
                    前端界面
                  </v-card-text>
                </v-card>
              </v-hover>
            </v-flex>
            <v-flex xs12 md3>
              <v-hover
                v-slot:default="{ hover }"
                :open-delay="openDelay"
                :close-delay="closeDelay"
                :disabled="disabled"
                :value="value"
              >
                <v-card flat class="transparent" :elevation="hover ? 12 : 0" height="300">
                  <v-card-text class="text-center">
                    <v-icon x-large class="blue--text text--lighten-2">mdi-flash
                    </v-icon>
                  </v-card-text>
                  <v-card-title primary-title class="layout justify-center">
                    <div class="headline">Server</div>
                  </v-card-title>
                  <v-card-text class="text-center">
                    <v-chip x-small color="#DAD7E5" draggable>Spring-Cloud Alibaba</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Java</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Go</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Kotlin</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Mysql</v-chip>
                    <v-chip x-small color="#DAD7E5" draggable>Spring-Boot</v-chip>
                    <v-chip x-small color="#AFD0D9" draggable>Redis</v-chip>
                    <v-chip x-small color="#D8C1A3" draggable>Mybatis-plus</v-chip>
                    <v-chip x-small color="#EAC542" draggable>Zookeeper</v-chip>
                    <v-chip x-small color="#27A4E6" draggable>RabbitMQ</v-chip>
                    <v-chip x-small color="#B09D81" draggable>Netty-Websocket</v-chip>
                    <v-chip x-small color="#65656A" draggable>Maxwell</v-chip>
                    <v-chip x-small color="#65656A" draggable>Elasticsearch</v-chip>
                    <v-chip x-small color="#DADDFD" draggable>Oauth2</v-chip>
                    <br>
                    <span class="text--primary">
                      <span>Fighting for more efficient  projects</span><br>
                    </span>
                    后端服务
                  </v-card-text>
                </v-card>
              </v-hover>
            </v-flex>
            <v-flex xs12 md3>
              <v-hover
                v-slot:default="{ hover }"
                :open-delay="openDelay"
                :close-delay="closeDelay"
                :disabled="disabled"
                :value="value"
              >
                <v-card flat class="transparent" :elevation="hover ? 12 : 0" height="300">
                  <v-card-text class="text-center">
                    <v-icon x-large class="blue--text text--lighten-2">mdi-wrench
                    </v-icon>
                  </v-card-text>
                  <v-card-title primary-title class="layout justify-center">
                    <div class="headline text-center">Ops</div>
                  </v-card-title>
                  <v-card-text class="text-center">
                    <v-chip x-small color="#D6E3EC" draggable>Unix</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Linux</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Nginx</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Ngrok</v-chip>
                    <v-chip x-small color="#D6E3EC" draggable>Docker</v-chip>
                    <br>
                    <span class="text--primary">
                      <span>Fighting for more stable projects</span><br>
                    </span>
                    运维只会一点基操，献丑了
                  </v-card-text>
                </v-card>
              </v-hover>
            </v-flex>
            <v-flex xs12 md3>
              <v-hover
                v-slot:default="{ hover }"
                :open-delay="openDelay"
                :close-delay="closeDelay"
                :disabled="disabled"
                :value="value"
              >
                <v-card flat class="transparent" :elevation="hover ? 12 : 0" height="300">
                  <v-card-text class="text-center">
                    <v-icon x-large class="blue--text text--lighten-2">
                      mdi-xbox-controller
                    </v-icon>
                  </v-card-text>
                  <v-card-title primary-title class="layout justify-center">
                    <div class="headline text-center">Taste</div>
                  </v-card-title>
                  <v-card-text class="text-center">
                    一杯咖啡一根烟，一行代码审一天~<br>
                    <v-chip x-small color="#DAD7E5" draggable>吉他</v-chip>
                    <v-chip x-small color="#A35B3D" draggable>乒乓球</v-chip>
                    <v-chip x-small color="#B27FB2" draggable>银の魂</v-chip>
                    <v-chip x-small color="#B27FB2" draggable>火影忍者</v-chip>
                    <v-chip x-small color="#81A6BE" draggable>LOL</v-chip>
                    <v-chip x-small color="#FFD4BF" draggable>下棋</v-chip>
                    <v-chip x-small color="#D9E6F7" draggable>斗鱼TV直播</v-chip>
                    <v-chip x-small color="#B848FF" draggable>跑步</v-chip>
                    <v-chip x-small color="#DE9140" draggable>老网抑云了</v-chip>

                    <br>
                    <span class="text--primary">
                      <span>
                        你好，很高兴遇见你！
                      </span><br>
                    </span>
                    努力做一个有趣的Boy
                  </v-card-text>

                </v-card>
              </v-hover>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
    </section>

    <section>
      <v-parallax src="@/assets/files/wanshiwu.jpg" class="mt-5">
        <v-layout column align-center justify-center>
          <div class="headline text-center">
            匆匆过客，留名于此？
          </div>
          <v-btn
            class="mt-12"
            color="brown darken-3"
            dark
            large
            elevation="12"
            href="/pre-made-themes"
          >
            拍一块砖
          </v-btn>
        </v-layout>
      </v-parallax>
    </section>

    <section>
      <v-container align-content-space-between fluid>
        <v-layout row wrap width="100%">
          <v-flex xs12 sm6>
            <v-card flat class="transparent">
              <v-card-title primary-title class="layout justify-center">
                <div class="headline">从始至终激励着我的：</div>
              </v-card-title>
              <v-card-text class="text-left">
                人不是什么时候都能活得光明正大，
                本想抬头挺胸前进，却不知何时就会沾一身泥巴。
                不过，即使那样也能坚持走下去的话，总有一天，泥巴也会干燥掉落的。
              </v-card-text>

            </v-card>
          </v-flex>
          <v-flex xs12 sm6>
            <v-card flat class="transparent">
              <v-card-title primary-title class="layout justify-center">
                <div class="headline">联系我</div>
              </v-card-title>
              <v-card-text>
                Keep Moving , Keep Thinking
              </v-card-text>
              <v-list class="transparent">
                <v-list-item>
                  <v-list-item-action>
                    <v-icon class="blue--text text--lighten-2">mdi-account</v-icon>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title class="text-left">陈泰来</v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-action>
                    <v-icon class="blue--text text--lighten-2">mdi-phone</v-icon>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title class="text-left">181-2058-3050</v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-action>
                    <v-icon class="blue--text text--lighten-2">mdi-map-marker
                    </v-icon>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title class="text-left">中国 ， 武汉市</v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-action>
                    <v-icon class="blue--text text--lighten-2">mdi-email</v-icon>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title class="text-left">nutschen0303@gmail.com</v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>
  </div>
</template>
<script>
import { ACCESS_TOKEN } from '@/store/mutation-types'
import '@/assets/css/business/me/me.scss'
import { mapState } from 'vuex'

export default {
  name: 'me',
  data: () => ({
    clientHeight: '', // 屏幕宽高比
    tile: false, // 头像磨边
    avatarSize: '210px', // 头像尺寸
    img: true,
    avatar: 'http://119.23.10.3:8018/group1/M00/00/00/rBIUS1-BXsOAeA1jAAAhIDW5dXQ408.jpg', // 头像
    username: '未名人', // 用户名
    signature: '同是天涯沦落人，相逢何必曾相识?', // 签名
    // 技能树
    openDelay: '0',
    closeDelay: '0',
    disabled: false,
    value: false
  }),

  computed: {
    ...mapState({
      isLogin: state => state.getters.isLogin
    }),
    isLogin: {
      get() {
        return this.$store.getters.isLogin
      },
      set(val) {
        this.$store.commit('setIsLogin', val)
      }
    }
  },
  mounted() {
  },
  created() {
    this.initUser()
  },
  beforeMount() {
    this.initClientWidth()
  },
  methods: {
    /**
             * 动态监控屏幕宽高比
             */
    initClientWidth() {
      // 获取浏览器可视区域高度
      this.clientHeight = `${document.documentElement.clientHeight}` - 74
      const _that = this
      window.onresize = function temp() {
        _that.clientHeight = `${document.documentElement.clientHeight}` - 74
      }
    },
    // 跳转至单点登录界面
    joinMe() {
      // 清空菜单选中后 再跳转到登录
      this.$store.commit('clearMenuNavTab')
      this.$goNew('/login')
    },
    clearLogin() {
      // 清空 cookie 清空 store中的用户信息和 token信息
      this.$cookie.delete(ACCESS_TOKEN)
      this.$store.commit('clearUserInfo')
      this.$store.commit('setIsLogin', false)
      console.log('用户信息清理结束~')
      this.defaultUserInfo()
      console.log('默认用户名已设置~')
    },
    logOut() {
      this.clearLogin()
    },
    initUser() {
      const userInfo = this.$store.getters.userInfo
      if (!userInfo) {
        this.clearLogin()
      } else {
        if (userInfo.name !== undefined && userInfo.name !== '') {
          this.avatar = userInfo.avatar === '' ? 'http://119.23.10.3:8018/group1/M00/00/00/rBIUS1-BXsOAeA1jAAAhIDW5dXQ408.jpg' : userInfo.avatar
          this.username = userInfo.name
          this.signature = userInfo.signature
          this.$store.commit('setIsLogin', true)
          console.log('初始化用户信息完毕')
        } else {
          console.log('用户没有登陆，未找到相关信息，使用默认信息初始化')
        }
      }
    },
    defaultUserInfo() {
      this.avatar = 'http://119.23.10.3:8018/group1/M00/00/00/rBIUS1-BXsOAeA1jAAAhIDW5dXQ408.jpg'
      this.username = '未名人'
      this.signature = '同是天涯沦落人，相逢何必曾相识?'
    }
  }
}
</script>

<style scoped>

</style>
